<template>
  <view class="answer-container">
    <view class="answer-card">
      <view class="answer-type-list">
        <view class="answer-type-item" v-for="(item,key) in questionType" :key="key">
          <view class="answer-type-title">{{key}}.{{item}}（共{{questionFilter(key).length}}道）</view>
          <view class="answer-circle-list">
            <view v-for="(quest,index) in questionFilter(key)" :key="quest.id" @click="onSelectQuestion(quest.id)">
              <view class="answer-circle" :class="quest.isAnswer === 'y'?'checked':''">{{index + 1}}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="answer-tips">
        <view class="answer-tip-not">未答</view>
        <view class="answer-tip-yes">已答</view>
      </view>
    </view>
    <view class="block-btn" @click="onSubmit">确认提交</view>
  </view>

</template>

<script>
  export default {
    props: {
      questions: {
        type: Array,
        default: () => ([])
      },
    },
    data() {
      return {
        questionType: {
          1: '单选',
          2: '多选',
          3: '判断',
          4: '填空',
          5: '简答'
        },
      }
    },
    computed: {
      questionFilter() {
        return (type) => {
          return this.questions.filter(item => item.qtype === type)
        }
      }
    },
    methods: {
      onSelectQuestion(id) {
        this.$emit('select', id);
      },
      onSubmit() {
        this.$emit('submit');
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #F2F3F6;
  }

  .answer-container {
    padding: 20rpx 4%;
  }

  .answer-card {
    background-color: #fff;
    padding: 30rpx 20rpx;
    border-radius: 16rpx;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.01);
  }

  .answer-type-list {
    height: 60vh;
    overflow-y: auto;
  }

  .answer-type-item {
    margin-bottom: 30rpx;
  }

  .answer-type-title {
    font-size: 28rpx;
    color: #313131;
    font-weight: bold;
  }

  .answer-circle-list {
    margin-top: 30rpx;
    overflow: hidden;

    >view {
      float: left;
      width: 20%;
      text-align: center;
      margin: 20rpx 0;
    }
  }

  .answer-circle {
    display: inline-block;
    width: 74rpx;
    height: 74rpx;
    background: rgba(26, 59, 255, 0.08);
    color: #1A63FF;
    border-radius: 50%;
    text-align: center;
    line-height: 74rpx;

    &.checked {
      background: #1A63FF;
      color: #fff;
    }
  }

  .answer-tips {
    border-top: 1px dashed #C8C8C8;
    padding-top: 36rpx;
    text-align: center;
    margin-top: 40rpx;

    >view {
      display: inline-block;
      margin: 0 20rpx;

      &::before {
        content: '';
        display: inline-block;
        width: 18rpx;
        height: 18rpx;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10rpx;
      }
    }

    .answer-tip-not {
      &::before {
        background-color: rgba(26, 99, 255, .1);
      }
    }

    .answer-tip-yes {
      &::before {
        background-color: rgba(26, 99, 255, 1);
      }
    }
  }

  .block-btn {
    margin-top: 40rpx;
    background: linear-gradient(115deg, #438BFE 0%, #1A63FF 100%);
    border-radius: 45px;
    text-align: center;
    font-size: 40rpx;
    color: #fff;
    padding: 25rpx 0;
  }

  .action-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    text-align: center;
    padding: 30rpx;
    background-color: #fff;
    color: #969696;

    >view {
      flex: 1;
    }
  }
</style>